<template>
  <div class="edit credit">
    <Form ref="product" :model="product1" :rules="ruleValidate1" :label-width="120">
      <h3 class="title">当天到期配置</h3>
      <FormItem label="扣款方式" prop="money1">
        <Input v-model="product1.money1" value="全额扣款" placeholder="全额扣款" disabled></Input>
      </FormItem>
      <FormItem label="扣款次数" prop="time1">
          <Select clearable style="width:400px" v-model="product1.time1" placeholder="请选择">
            <Option :value=0>1次</Option>
            <Option :value=1>2次</Option>
          </Select>
      </FormItem>
      <FormItem label="第一次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem label="第二次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
       <FormItem >
        <Button @click="cancel('product')" style="margin-right:5px">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </FormItem>
    </Form>
    <Form ref="product" :model="product2" :rules="ruleValidate2" :label-width="120">
      <h3 class="title">逾期1天配置 </h3>
      <FormItem label="扣款额度" prop="penaltyDayRate">
        <RadioGroup v-model="type">
          <Radio :label="1">固定值</Radio>
          <Radio :label="0">自定义</Radio>
        </RadioGroup>
        <Input v-if="type == 0" v-model="product2.penaltyDayRate" number></Input>
        <Select clearable  v-if="type == 1" v-model="product2.penaltyDayRate">
          <Option :value="0.10">0.10</Option>
          <Option :value="0.20">0.20</Option>
          <Option :value="0.30">0.30</Option>
          <Option :value="0.40">0.40</Option>
          <Option :value="0.50">0.50</Option>
          <Option :value="0.60">0.60</Option>
          <Option :value="0.70">0.70</Option>
          <Option :value="0.80">0.80</Option>
          <Option :value="0.90">0.90</Option>
          <Option :value="1.00">1.00</Option>
        </Select>

      </FormItem>
<!--
      <FormItem label="扣款额度" prop="money1">
        <Select clearable style="width:200px" v-model="product2.money1" placeholder="请选择">
          <Option v-for="(item,index) in limits" :value=item.value :key="index">{{item.limit}}</Option>
        </Select>
      </FormItem>-->
      <FormItem label="扣款次数" prop="time1">
        <Select clearable style="width:400px" v-model="product2.time1" placeholder="全部">
          <Option :value=0>1次</Option>
          <Option :value=1>2次</Option>
        </Select>
      </FormItem>
      <FormItem label="第一次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem label="第二次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
       <FormItem >
        <Button @click="cancel" style="margin-right:5px">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </FormItem>
    </Form>
    <Form ref="product" :model="product3" :rules="ruleValidate3" :label-width="120">
      <h3 class="title">逾期2天配置</h3>
      <FormItem label="扣款额度" prop="penaltyDayRate">
        <RadioGroup v-model="type">
          <Radio :label="1">固定值</Radio>
          <Radio :label="0">自定义</Radio>
        </RadioGroup>
        <Input v-if="type == 0" v-model="product3.penaltyDayRate" number></Input>
        <Select clearable  v-if="type == 1" v-model="product3.penaltyDayRate">
          <Option :value="0.10">0.10</Option>
          <Option :value="0.20">0.20</Option>
          <Option :value="0.30">0.30</Option>
          <Option :value="0.40">0.40</Option>
          <Option :value="0.50">0.50</Option>
          <Option :value="0.60">0.60</Option>
          <Option :value="0.70">0.70</Option>
          <Option :value="0.80">0.80</Option>
          <Option :value="0.90">0.90</Option>
          <Option :value="1.00">1.00</Option>
        </Select>

      </FormItem>
      <FormItem label="扣款次数" prop="time1">
        <Select clearable style="width:400px" v-model="product3.time1" placeholder="全部">
          <Option :value=0>1次</Option>
          <Option :value=1>2次</Option>
        </Select>
      </FormItem>
      <FormItem label="第一次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem label="第二次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem >
        <Button @click="cancel" style="margin-right:5px">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </FormItem>
    </Form>
    <Form ref="product" :model="product4" :rules="ruleValidate4" :label-width="120">
      <h3 class="title">逾期3天配置</h3>
      <FormItem label="扣款额度" prop="penaltyDayRate">
        <RadioGroup v-model="type">
          <Radio :label="1">固定值</Radio>
          <Radio :label="0">自定义</Radio>
        </RadioGroup>
        <Input v-if="type == 0" v-model="product4.penaltyDayRate" number></Input>
        <Select clearable  v-if="type == 1" v-model="product4.penaltyDayRate">
          <Option :value="0.10">0.10</Option>
          <Option :value="0.20">0.20</Option>
          <Option :value="0.30">0.30</Option>
          <Option :value="0.40">0.40</Option>
          <Option :value="0.50">0.50</Option>
          <Option :value="0.60">0.60</Option>
          <Option :value="0.70">0.70</Option>
          <Option :value="0.80">0.80</Option>
          <Option :value="0.90">0.90</Option>
          <Option :value="1.00">1.00</Option>
        </Select>

      </FormItem>
      <FormItem label="扣款次数" prop="time1">
        <Select clearable style="width:400px" v-model="product4.time1" placeholder="全部">
          <Option :value=0>1次</Option>
          <Option :value=1>2次</Option>
        </Select>
      </FormItem>
      <FormItem label="第一次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem label="第二次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem >
        <Button @click="cancel" style="margin-right:5px">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </FormItem>
    </Form>
    <Form ref="product" :model="product5" :rules="ruleValidate5" :label-width="120">
      <h3 class="title">逾期4天配置</h3>
      <FormItem label="扣款额度" prop="penaltyDayRate">
        <RadioGroup v-model="type">
          <Radio :label="1">固定值</Radio>
          <Radio :label="0">自定义</Radio>
        </RadioGroup>
        <Input v-if="type == 0" v-model="product5.penaltyDayRate" number></Input>
        <Select clearable  v-if="type == 1" v-model="product5.penaltyDayRate">
          <Option :value="0.10">0.10</Option>
          <Option :value="0.20">0.20</Option>
          <Option :value="0.30">0.30</Option>
          <Option :value="0.40">0.40</Option>
          <Option :value="0.50">0.50</Option>
          <Option :value="0.60">0.60</Option>
          <Option :value="0.70">0.70</Option>
          <Option :value="0.80">0.80</Option>
          <Option :value="0.90">0.90</Option>
          <Option :value="1.00">1.00</Option>
        </Select>

      </FormItem>
      <FormItem label="扣款次数" prop="time1">
        <Select clearable style="width:400px" v-model="product5.time1" placeholder="全部">
          <Option :value=0>1次</Option>
          <Option :value=1>2次</Option>
        </Select>
      </FormItem>
      <FormItem label="第一次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem label="第二次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem >
        <Button @click="cancel" style="margin-right:5px">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </FormItem>
    </Form>
    <Form ref="product" :model="product6" :rules="ruleValidate6" :label-width="120">
      <h3 class="title">逾期5天及以上配置</h3>
      <FormItem label="扣款额度" prop="penaltyDayRate">
        <RadioGroup v-model="type">
          <Radio :label="1">固定值</Radio>
          <Radio :label="0">自定义</Radio>
        </RadioGroup>
        <Input v-if="type == 0" v-model="product6.penaltyDayRate" number></Input>
        <Select clearable  v-if="type == 1" v-model="product6.penaltyDayRate">
          <Option :value="0.10">0.10</Option>
          <Option :value="0.20">0.20</Option>
          <Option :value="0.30">0.30</Option>
          <Option :value="0.40">0.40</Option>
          <Option :value="0.50">0.50</Option>
          <Option :value="0.60">0.60</Option>
          <Option :value="0.70">0.70</Option>
          <Option :value="0.80">0.80</Option>
          <Option :value="0.90">0.90</Option>
          <Option :value="1.00">1.00</Option>
        </Select>

      </FormItem>
      <FormItem label="扣款次数" prop="time1">
        <Select clearable style="width:400px" v-model="product6.time1" placeholder="全部">
          <Option :value=0>1次</Option>
          <Option :value=1>2次</Option>
        </Select>
      </FormItem>
      <FormItem label="第一次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem label="第二次扣款时间">
        <TimePicker :steps="[1, 30]" placeholder="请选择"  format="HH:mm" style="width: 400px"></TimePicker>
      </FormItem>
      <FormItem >
        <Button @click="cancel" style="margin-right:5px">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </FormItem>
    </Form>

  </div>
</template>

<script>
export default {
  props:['nameSelect'],
  data() {
    return {
      tag: {
        title: "代扣配置",
        path: "/work/withhold/edit"
      },
      type:1,
      typeList: [],
      times:3,
      limits:[
        {value:0,limit:'10%'},
        {value:1,limit:'20%'},
        {value:2,limit:'30%'},
        {value:3,limit:'40%'},
        {value:4,limit:'50%'},
        {value:5,limit:'60%'},
        {value:6,limit:'70%'},
        {value:7,limit:'80%'},
        {value:8,limit:'90%'},
        {value:9,limit:'100%'},
      ],
      statusList:[//0未发布1发布2下架
       /* {
          id:0,
          money:'未发布 '
        },*/
        {
          id:1,
          money:'上架 '
        },
        {
          id:2,
          money:'下架 '
        }
        ],
      product1:{},
      product2:{},
      product3:{},
      product4:{},
      product5:{},
      product6:{},
      ruleValidate1: {
        money1: [{ required: true, message: "请填写金额", trigger: "blur" , }],
        time1: [{ required: true, message: "请填写次数", trigger: "blur" ,type:'number'},
         {validator: (rule,value,callback) =>{
             if(value > 5){
               callback(new Error('次数仅限1-5'))
             }
             callback();
           }, trigger: 'blur'}
          ],
      },
      ruleValidate2: {
        money2: [{ required: true, message: "请填写金额", trigger: "blur" , }],
        time2: [{ required: true, message: "请填写次数", trigger: "blur" ,type:'number'},
         {validator: (rule,value,callback) =>{
             if(value > 5){
               callback(new Error('次数仅限1-5'))
             }
             callback();
           }, trigger: 'blur'}
          ],
      },
      ruleValidate3: {
        money3: [{ required: true, message: "请填写金额", trigger: "blur" , }],
        time3: [{ required: true, message: "请填写次数", trigger: "blur" ,type:'number'},
         {validator: (rule,value,callback) =>{
             if(value > 5){
               callback(new Error('次数仅限1-5'))
             }
             callback();
           }, trigger: 'blur'}
          ],
      },
      ruleValidate4: {
        money4: [{ required: true, message: "请填写金额", trigger: "blur" , }],
        time4: [{ required: true, message: "请填写次数", trigger: "blur" ,type:'number'},
         {validator: (rule,value,callback) =>{
             if(value > 5){
               callback(new Error('次数仅限1-5'))
             }
             callback();
           }, trigger: 'blur'}
          ],
      },
      ruleValidate5: {
        money4: [{ required: true, message: "请填写金额", trigger: "blur" , }],
        time4: [{ required: true, message: "请填写次数", trigger: "blur" ,type:'number'},
         {validator: (rule,value,callback) =>{
             if(value > 5){
               callback(new Error('次数仅限1-5'))
             }
             callback();
           }, trigger: 'blur'}
          ],
      },
      ruleValidate6: {
        money6: [{ required: true, message: "请填写金额", trigger: "blur" , }],
        time6: [{ required: true, message: "请填写次数", trigger: "blur" ,type:'number'},
         {validator: (rule,value,callback) =>{
             if(value > 5){
               callback(new Error('次数仅限1-5'))
             }
             callback();
           }, trigger: 'blur'}
          ],
      }
    };
  },
  mounted() {
    //this.product = this.$route.query.product;
    this.$post('/bkmerchant/list').then(res => {
      if(res.code == 0){
        this.typeList=res.data.pageListData;
        console.log( this.typeList,'type');
      }
    })
    this.tag.name = this.nameSelect;
    this.$store.commit('changeTag', this.tag.path);
    this.$store.commit('openPage', this.tag);
  },
  methods: {
    resetValidate(money) {
      //清空判断
      this.$refs[money].resetFields();
    },
    getTime(time,index){
      console.log(time,'time');
      console.log(index,'index');
    },
    ok(name) {
      console.log(name,'okName');
      //确定
      let url = "";
      this.$refs[name].validate(valid => {
        if (valid) {
          // let data = {

          // };
          // if (this.$route.query.title == "新增产品") {
          //   url = "/bkproduct/append";
          // } else if (this.$route.query.title == "编辑产品") {
          //   url = "/bkproduct/modify";
          // }
          // this.$post(url, data).then(
          //   res => {
          //     if (res.code === 0) {
          //       console.log(res, "edit");
          //       this.$Message.success(`${this.$route.query.title}成功！`);
          //       this.$router.push({path:'/work/credit/list'})
          //     }
          //   },
          //   err => {
          //     console.log(err);
          //   }
          // );
        }
      });
    },
    cancel(name) {
      this.resetValidate(name);
    }
  }
};
</script>

<style scoped lang="less">
.edit {
  width: 50%;
}
.ivu-input-group .ivu-input {
  text-align: center;
}
.ivu-input-group-prepend,
.ivu-input-group-append {
  width: 36px !important;
}
.credit {
  h3 {
    margin-bottom: 15px;
    margin-left: 10px;
    border-left: solid 3px #20a0ff;
    padding-left: 15px;
    font-weight: bolder;
    font-size: 16px;
    color: #000;
  }
}
